<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>APP</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <style>
        #header{
            text-align: center;
        }
        #header h5{
            display: inline-block;
            color: #FFF;
            line-height: 48px;
            width: 100%;
            position: absolute;
            left: 0;
        }
        .btn_box{
            width: 52px;
            height: 48px;
            position: relative;
        }
        .btn_box img{
            width: 23px;
            position: absolute;
            left: 50%;
            top: 50%;
            -webkit-transform: translate(-50%,-50%);
                    transform: translate(-50%,-50%);
        }
        .btn_box .btn_box_text{
            display: block;
            text-align: center;
            line-height: 48px;
            color: #FFF;
        }
        .btn_box.pull-left{
            background: url(../../res/img/webview_dividing.png) right center no-repeat;
            background-size: 1px 100%;
            position: relative;
            z-index: 1;
        }
        .btn_box.pull-left:active,.btn_box.pull-left.tap-active{
            background: #7F0000 url(../../res/img/webview_dividing.png) right center no-repeat;
            background-size: 1px 100%;
        }
        .btn_box.pull-right{
            background: url(../../res/img/webview_dividing.png) left center no-repeat;
            background-size: 1px 100%;
            position: relative;
            z-index: 1;
        }
        .btn_box.pull-right:active,.btn_box.pull-right.tap-active{
            background: #7F0000 url(../../res/img/webview_dividing.png) left center no-repeat;
            background-size: 1px 100%;
        }
        #header{
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
        }
        .search_box{
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            flex: 1;
            background: url(../../res/img/tmall_search_result_input.9.png) center center no-repeat;
            background-size: 100% 39px;
            height: 100%;
            position: relative;
            overflow: hidden;
        }
        .search_box .home_icon_search {
            float: left;
            height: 100%;
            width: 37px;
            background: url(../../res/img/tmall_icon_search.png) center center no-repeat;
            background-size: 18px 18px;
        }
        .search_box .text {
            position: absolute;
            width: 100%;
            left: 0;
            top: 50%;
            /*text-indent: 37px;*/
            padding-left: 37px;
            font-size: 0.9em;
            -webkit-transform: translateY(-50%);
                    transform: translateY(-50%);
        }


        body,html{
            background: #FFF;
        }
        #main{
            padding: 0.75em;
            position: relative;
        }
        img{
            display: block;
        }

        .btn-group{
            border: 1px solid #666666;
            border-radius: 6px;
            overflow: hidden;
        }
        .btn-group span{
            height: 34px;
            line-height: 34px;
            text-align: center;
            color: #666666;
            background-color: #FFF;
            width: 50%;
            font-size: 0.9em;
        }
        .btn-group span.active{
            background-color: #666666;
            color: #FFF;
        }
        .seen{
            border-top: 1px solid #C6C6C6;
            border-bottom: 1px solid #C6C6C6;
            height: 33px;
            line-height: 33px;
            display: block;
            margin: 0.9em auto;
            text-align: center;
            font-size: 0.9em;
        }
        .seen .icon-clock{
            display: inline-block;
            height: 33px;
            width: 20px;
            line-height: 33px;
            background: url(../../res/img/tm_search_visit_history.png) center center no-repeat;
            background-size: 20px 20px;
            vertical-align: bottom;
        }
        .group-label{
            color: #666666;
            height: 28px;
            line-height: 28px;
        }

        .clear-history-box{
            position: absolute;
            width: 100%;
            height: 57px;
            background-color: #FFF;
            bottom: 0;
            left: 0;

        }
        .clear-history-box .clear-history{
            position: absolute;
            width: 114px;
            height: 33px;
            background-color: #DDDDDD;
            color: #000000;
            line-height: 33px;
            text-align: center;
            left: 50%;
            top: 50%;
            -webkit-transform: translate(-50%,-50%);
                    transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div id="wrap">
        <div id="header">
            <div class="btn_box pull-left" tapmode="tap-active" onclick="api.closeWin();">
                <img src="../../res/img/tmall_btn_bar_back.png" alt="">
            </div>
            <div class="search_box" >
                <i class="home_icon_search"></i>
                <input type="text" placeholder="" class="text">
            </div>
            <div class="btn_box pull-right" tapmode="tap-active" onclick="">
                <span class="btn_box_text">搜索</span>
            </div>
        </div>
        <div id="main"> 
            <div class="btn-group clearfix">
                <span class="btn-change btn-left active pull-left" tapmode="tap-active" onclick="changeSearch(0);">
                    我的搜索
                </span>
                <span class="btn-change btn-right pull-left" tapmode="tap-active" onclick="changeSearch(1);">
                    大家都在搜
                </span>
            </div>
            <span class="seen">
                <i class="icon-clock"></i>
                看过的商品和店铺
            </span>
            <label class="group-label">最近搜过：</label>


            <div class="clear-history-box">
                <span class="clear-history">
                    清空搜索历史
                </span>
            </div>
        </div>

    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript">
    var btnChange = $api.domAll('.btn-change');
    var changeSearch = function(index){
        for (var i = 0; i < 2; i++) {
            if (i == index) {
                $api.addCls(btnChange[index],'active');
            } else{
                $api.removeCls(btnChange[i],'active');
            }
        }
        api.execScript({
            name: 'search',
            frameName: 'search',
            script: 'changeSearchResult()'
        });
    };
    apiready = function(){
        var header = $api.byId('header');
        $api.fixStatusBar(header); 
        var headerPos = $api.offset(header);
        var main = $api.byId('main');
        var mainPos = $api.offset(main);
        var name = api.pageParam.name;
        var title = api.pageParam.title;
        var url = './'+name+'-con.html';
        var btnGroup = $api.dom('.btn-group');
        var seen = $api.dom('.seen');
        var groupLabel = $api.dom('.group-label');
        var clearHistoryBox = $api.dom('.clear-history-box');
        var thisHeight = headerPos.h+$api.offset(btnGroup).h+$api.offset(seen).h+$api.offset(groupLabel).h+$api.offset(seen).h;
        api.openFrame({
            name: name,
            url: url,
            rect: {
                x: 0,
                y: thisHeight,
                w: 'auto',
                h: api.winHeight-thisHeight-$api.offset(clearHistoryBox).h
            }
        });  
    }
</script>
</html>